<template>
  <div class="flex w-full justify-between">
    <div
      v-for="(item, index) in info"
      :key="index"
      class="wrap-box flex flex-1 items-center justify-center"
    >
      <div class="flex flex-1 flex-col items-center">
        <span class="num">{{ item.num }}</span>
        <div class="title mb-[-14px] mt-[8px]">{{ item.title }}</div>
        <img
          src="/static/screen/alarm-statistics-item-bg.png"
          class="h-[32.006px] w-[6.042vw]"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
defineProps({
  info: {
    required: true,
    type: Array<{
      num: string | number;
      title: string;
    }>,
  },
});
</script>

<style lang="scss" scoped>
.item {
  width: 6.042vw;
  height: 1.667vw;
  text-align: center;
  background: url('/static/screen/alarm-statistics-item-bg.png');
  background-size: 100% 100%;
}

.wrap-box {
  .num {
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
  }
  .title {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
